<template>
  <div class="login_box">
    <!-- 盒子A -->
    <div class="shell">
      <div
        class="container a_container"
        :class="{
          is_z: isActive === 'a',
          container_hidden: isActive === 'b',
          container_right: isActive === 'a',
        }"
      >
        <h2 class="title">创建账号</h2>
        <div class="form_icons">
          <i class="iconfont" v-for="(icon, index) in icons" :key="index">
            <SvgIcon
              :width="icon.width"
              :height="icon.height"
              :name="icon.name"
              :color="icon.iconColor"
              @mouseenter="icon.iconColor = '#4b70e2'"
              @mouseleave="icon.iconColor = '#272636'"
            />
          </i>
        </div>
        <span class="form_span">请选择注册方式</span>
        <el-form
          ref="registerFormRef"
          :model="registerForm"
          :rules="registerRules"
          @keyup.enter="goRegister"
        >
          <el-form-item prop="email">
            <el-input
              v-model="registerForm.email"
              placeholder="email"
            ></el-input>
          </el-form-item>
          <el-form-item prop="username">
            <el-input
              v-model="registerForm.username"
              placeholder="Username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="registerForm.password"
              show-password
              placeholder="password"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" class="custom_btn" @click="goRegister">
          注册
        </el-button>
      </div>

      <div
        class="container b_container"
        :class="{
          is_z: isActive === 'b',
          container_hidden: isActive === 'a',
          container_left: isActive === 'b',
        }"
      >
        <h2 class="title">登入账号</h2>
        <div class="form_icons">
          <i class="iconfont" v-for="(icon, index) in icons" :key="index">
            <SvgIcon
              :width="icon.width"
              :height="icon.height"
              :name="icon.name"
              :color="icon.iconColor"
              @mouseenter="icon.iconColor = '#4b70e2'"
              @mouseleave="icon.iconColor = '#272636'"
            />
          </i>
        </div>
        <span class="form_span">请选择登录方式</span>
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          @keyup.enter="goLOgin"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="Username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="loginForm.password"
              show-password
              placeholder="password"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="form_link">忘记密码？</div>
        <el-button
          type="primary"
          class="custom_btn"
          :loading="loading"
          @click="goLOgin"
        >
          登录
        </el-button>
      </div>

      <!-- 盒子C -->
      <div
        class="switch"
        :class="{
          switch_left: isActive === 'a',
          switch_right: isActive === 'b',
        }"
      >
        <div class="switch_circle"></div>
        <div class="switch_circle switch_circle-t"></div>

        <div
          class="switch_container"
          :class="{ is_z: isActive === 'a', is_hidden: isActive === 'b' }"
        >
          <h2 class="title" style="letter-spacing: 0">Welcome Back！</h2>
          <p class="description">
            已经有账号了嘛，去登入账号来进入奇妙世界吧！！！
          </p>
          <el-button type="primary" class="custom_btn" @click="gotoLOgin">
            去登录
          </el-button>
        </div>

        <div
          class="switch_container"
          :class="{ is_z: isActive === 'b', is_hidden: isActive === 'a' }"
        >
          <h2 class="title" style="letter-spacing: 0">Hello Friend！</h2>
          <p class="description">
            去注册一个账号，成为尊贵的粉丝会员，让我们踏入奇妙的旅途！
          </p>
          <el-button type="primary" class="custom_btn" @click="gotoRegister">
            去注册
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { queryRegister, queryLogin } from "@/api";
import { ElMessage, ElNotification } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/store";

const useStore = useUserStore();

const $router = useRouter();
const $route = useRoute();

const icons = ref([
  {
    width: "24px",
    height: "24px",
    name: "QQ",
    color: "#272636",
  },
  {
    width: "24px",
    height: "24px",
    name: "weixin",
    color: "#272636",
  },
]);

const loginFormRef = ref(null);
const registerFormRef = ref(null);

const isActive = ref("a");
const loginForm = ref({
  username: "",
  password: "",
});
const registerForm = ref({
  email: "",
  username: "",
  password: "",
});
const loading = ref(false);

//自定义校验规则函数
const validatorPassword = (rule, value, callback) => {
  if (value.length >= 6) {
    callback();
  } else {
    callback(new Error("密码长度至少六位"));
  }
};

const loginRules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { trigger: "blur", validator: validatorPassword },
  ],
};

const registerRules = {
  email: [{ required: true, message: "请输入邮箱地址", trigger: "blur" }],
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { trigger: "blur", validator: validatorPassword },
  ],
};

// 注册
const goRegister = async () => {
  await registerFormRef.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      queryRegister(registerForm.value)
        .then((res) => {
          ElMessage.success(res.message);
          isActive.value = "b";
          loginForm.value = {
            username: "",
            password: "",
          };
        })
        .catch((error) => {
          ElNotification({
            type: "error",
            message: error.message,
          });
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 登录
const goLOgin = async () => {
  await loginFormRef.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      queryLogin(loginForm.value)
        .then((res) => {
          useStore.setToken(res.data.token);
          const redirect = $route.query.redirect;
          $router.push({ path: redirect || "/" });
          ElNotification({
            type: "success",
            message: "欢迎回来",
          });
        })
        .catch((error) => {
          ElNotification({
            type: "error",
            message: error.message,
          });
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 去登录
const gotoLOgin = () => {
  isActive.value = "b";
  loginForm.value = {
    username: "",
    password: "",
  };
  registerFormRef.value.clearValidate();
};

// 去注册
const gotoRegister = () => {
  isActive.value = "a";
  registerForm.value = {
    email: "",
    username: "",
    password: "",
  };
  loginFormRef.value.clearValidate();
};
</script>

<style lang="less" scoped>
.login_box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ecf0f3;
  color: #a0a5a8;
}
.shell {
  position: relative;
  width: 80rem;
  height: calc(100vh * 680 / 1080);
  background-color: #ecf0f3;
  box-shadow:
    10px 10px 10px #d1d9e6,
    -10px -10px 10px #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 48rem;
  height: 100%;
  background-color: #ecf0f3;
  box-sizing: border-box;
  transition: 1.25s ease;
}
.a_container {
  z-index: 100;
}
.b_container {
  z-index: 0;
}
.title {
  font-size: 34px;
  font-weight: 700;
  color: #181818;
  letter-spacing: 10px;
  line-height: 3;
}
.form_icons {
  display: flex;
  gap: 20px;
  .iconfont {
    opacity: 0.5;
    cursor: pointer;
  }
  .iconfont:hover {
    opacity: 1;
  }
}
.form_span {
  margin: 16px 0;
  letter-spacing: 2px;
}
.form_link {
  cursor: pointer;
  color: #a0a5a8;
  font-size: 16px;
  line-height: 2;
  &:hover {
    color: #181818;
  }
}
.custom_btn {
  width: 180px;
  height: 50px;
  border-radius: 25px;
  margin-top: 36px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 4px;
  background-color: #4b70e2;
  color: #f9f9f9;
  box-shadow:
    8px 8px 16px #d1d9e6,
    -8px -8px 16px #f9f9f9;
  border: none !important;
}
:deep(.el-input__wrapper) {
  width: 360px;
  height: 40px;
  background-color: #ecf0f3;
  border-radius: 8px;
  box-shadow:
    inset 2px 2px 4px #d1d9e6,
    inset -2px -2px 4px #f9f9f9;
  &:hover {
    box-shadow:
      inset 4px 4px 4px #d1d9e6,
      inset -4px -4px 4px #f9f9f9;
  }
  &:focus {
    box-shadow:
      inset 4px 4px 4px #d1d9e6,
      inset -4px -4px 4px #f9f9f9;
  }
}
.switch {
  width: 32rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  background-color: #ecf0f3;
  overflow: hidden;
  box-shadow:
    4px 4px 10px #d1d9e6,
    -4px -4px 10px #d1d9e6;
  z-index: 200;
  transition: 1.25s ease;
}
.switch_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: 1.25s ease;
}
.description {
  letter-spacing: 0.25px;
  text-align: center;
  line-height: 1.6;
}
.switch_circle {
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background-color: #ecf0f3;
  box-shadow:
    inset 8px 8px 12px #b8bec7,
    inset -8px -8px 12px #fff;
  bottom: -14rem;
  left: -14rem;
}
.switch_circle-t {
  width: 24rem;
  height: 24rem;
  top: -12rem;
  left: 70%;
}
.is_hidden {
  position: absolute;
  visibility: hidden;
  z-index: 0;
  opacity: 0;
  transition: 1.25s;
}
.is_z {
  z-index: 100;
}
.container_hidden {
  visibility: hidden;
  z-index: 0;
  opacity: 0;
  transition: 1.25s;
}
.container_left {
  transform: translateX(-32rem);
}
.container_right {
  transform: translateX(0);
}
.switch_left {
  transform: translateX(0);
}
.switch_right {
  transform: translateX(48rem);
}
</style>
